<template>
  <yd-layout class="m-member-manage">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="支付成功" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
    </yd-navbar>

    <div class="m-ct-bg m-member-manage-ct">
      <p class="ico-success"><yd-icon name="checkoff" color="#fff"></yd-icon></p>
      <p class="tit">恭喜您，付款成功！</p>
      <p class="subtit">有效期至：<em>{{memberDate}}</em></p>
      <p class="subtit">支付金额：<em>{{totalAmount | currency}}元</em></p>
      <yd-button-group>
        <yd-button size="large" type="primary" @click.native="$router.replace('/')">返回首页</yd-button>
      </yd-button-group>
    </div>
  </yd-layout>
</template>

<script>
  import { apiMemberInfo } from 'js/api'

  export default {
    data() {
      return {
        memberDate: '',
        totalAmount: ''
      }
    },
    created() {
      apiMemberInfo(this.$store.getters.token).then(data => {
        const oData = data || {}
        if (oData.status == 'success') { // 成功
          this.memberDate = (oData.date || '').split(' ')[0]
          this.totalAmount = this.$route.query.total_amount || 0
        } else {
          this.$toast('支付失败，请重新支付', () => {
            this.$router.replace('/member')
          })
        }
      })
    }
  }
</script>

<style lang="scss">
  .m-member-manage-ct {
    text-align: center;
    .ico-success {
      display: inline-block;
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      margin-top: 1rem;
      background: #f00385;
      border-radius: .5rem;
    }
    .tit {
      padding: .5rem 0;
      font-size: .36rem;
      color: #f00385;
    }
    .subtit {
      width: 3rem;
      margin: 0 auto;
      text-align: left;
      line-height: .68rem;
      font-size: .28rem;
      color: #999;
      em {
        color: #333;
      }
    }
    .yd-button {
      margin-top: 1rem;
    }
  }
</style>